<template>
  <div class="content">
    <div class="row-list f-r f-w">
      <div class="row-box" @click="onAdd">
        <div class="row-item f-c a-c j-c" style="background: #fff">
          <img style="width: 54px;height: 52px;margin-bottom: 20px" src="@/assets/farmland/add-f.png" alt="">
          <div class="text">添加田</div>
        </div>
      </div>
      <div v-for="item in tableData" :key="item.id" class="row-box">
        <div class="row-item f-c">
          <img class="f-g" :src="item.img" alt="" style="margin-bottom: 53px">
          <div class="tag">{{ item.cropName }}</div>
          <div class="name-wrapper">
            <div class="name">{{ item.fieldName }}</div>
            <div class="desc">{{ item.cropName }}，{{ item.area }}亩</div>
            <el-avatar class="avatar" src="" />
          </div>
        </div>
      </div>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-drawer
      title="分田"
      :visible.sync="drawer"
      direction="rtl"
      size="1050px"
    >
      <div class="drawer-content">
        <field-page v-if="drawer" :group-id="groupId" />
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="drawer = false">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import crud from '@/mixins/crud';
import { http_farmland_group } from '@/api';
import FieldPage from '@/views/farmland-group/field-page';
export default {
  name: 'Farmland',
  components: { FieldPage },
  mixins: [crud],
  props: {
    groupId: [String, Number]
  },
  data() {
    return {
      drawer: false,
      tableData1: [
      ],
      totalSize1: 0,
      searchInput: ''
    }
  },
  created() {
    http_farmland_group.read(this.groupId).then(res => {
      this.currentDetail = res.data
    })
  },
  methods: {
    initData() {
      http_farmland_group.fieldPage({
        id: this.groupId
      }).then(res => {
        this.tableData = res.rows
        this.totalSize = res.total
      })
    },
    onAdd() {
      this.drawer = true
    }
  }
}
</script>

<style lang="scss">
.right-l {
  width: 163px;
  flex-shrink: 0;
  .title {
    font-size: 14px;

    font-weight: 500;
    line-height: 20px;
    color: #222222;
    opacity: 1;
    margin-bottom: 15px;
  }
  .right-l-item {
    padding-bottom: 15px;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 15px;
  }
}
.right-r {
  flex-grow: 1;
  background: #ffffff;
  border: 1px solid #E6E6E6;
  padding: 12px;
  .right-r-header{
    height: 36px;
    border-bottom: 1px solid #E6E6E6;
    padding-left: 12px;
  }
  .right-r-item {
    padding: 15px 12px;
    border-bottom: 1px solid #E6E6E6;
  }
}
.drawer-content {
  overflow: auto;
  height: 100%;
  background-color: #ffffff;
  width: 100%;
  padding: 20px;
  padding-top: 0;
  ::v-deep .el-form {
    .el-form-item {
      .el-input,
      .el-select {
        width: 100% !important;
      }
    }
  }
}
.content  {
  .row-list {
    .row-box {
      width: 20%;
      padding: 12px 10px;
      .text {
        font-size: 18px;

        font-weight: 400;
        line-height: 22px;
        color: #9A9A9A;
      }
      .row-item {
        cursor: pointer;
        width: 100%;
        height: 159px;
        box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
        position: relative;
        border-radius: 14px;

        img {
          height: calc(100% - 53px);
        }
        .tag {
          position: absolute;
          left: 11px;
          top: -5px;
          width: 36px;
          height: 16px;
          background: #1AAD23;
          line-height: 16px;
          text-align: center;
          color: #ffffff;
          font-size: 12px;
        }
        .name-wrapper {
          padding: 2px 0 0 11px;
          height: 53px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          background-color: #ffffff;
          border-radius:0 0 14px 14px;
          overflow: hidden;
          .avatar {
            position: absolute;
            width: 35px;
            height: 35px;
            box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
            opacity: 1;
            border: 1px solid #707070;
            border-radius: 50%;
            overflow: hidden;
            top: -12px;
            right: 14px;
            background-color: #ffffff;
            z-index: 999;
          }
          .name {
            font-size: 14px;

            font-weight: 400;
            color: #595959;
            line-height: 22px;
          }
          .desc {
            margin-top: 5px;
            font-size: 12px;

            font-weight: 400;
            color: #595959;
            line-height: 22px;
          }
        }
      }
    }
  }
}
</style>
